<template>
	<view>
		<v-block v-for="(item,index) in list "  :key="index">
			<view :style="index==0?'margin-top: 90rpx;':'' " class="order-list" >
				<!-- 头部订单号 -->
				<view class="order-top">
					<text>订单号：{{item.orderNo}}</text>
					<text v-if="item.status===1" class="status">待付款</text>
					<text v-if="item.status===2" class="status">待发货</text>
					<text v-if="item.status===3" class="status">待收获</text>
					<text v-if="item.status===4" class="status">待评价</text>
				</view>
				<!-- 中间商品信息 -->
				<view class="order-sku" v-for="(sku,ind) in item.sku" :key="ind">
					<image :src="sku.skuImage" mode=""></image>
					<view class="atrr-name">
						<view class="skuName">{{sku.skuName}}</view>
						<view class="attr">{{sku.attr}}</view>
					</view>
					<view class="price-payNum">
						<view class="price">￥{{sku.price}}</view>
						<view class="payNum">数量:{{sku.payNum}}</view>
					</view>
				</view>
				<!-- 底部合计 -->
				<view class="flex">
					<view style="margin-left: auto; padding-right: 20rpx;">合计：
						<text class="main-text-color" style="font-weight: 700;">￥{{item.payMoney}}</text>
					</view>
				</view>
				<!-- 待支付 -->
				<view class="order-btn flex" v-if="item.status==1">
					<view class="order-btn-item">去支付</view>
					<view class="order-btn-item">取消订单</view>
				</view>
				<!-- 待发货 -->
				<view class="order-btn flex" v-if="item.status==2">
					<navigator url="../../pages/after-service/after-service">
					<view class="order-btn-item">申请退款</view>
					</navigator>
				</view>
				<!-- 待收货 -->
				<view class="order-btn flex" v-if="item.status==3">
					<view class="order-btn-item">查看物流</view>
					<view class="order-btn-item">确认收货</view>
				</view>
				<!-- 已完成 -->
				<view class="order-btn flex" v-if="item.status==4">
					<view class="order-btn-item">去评价</view>
				</view>
			</view>
		</v-block>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				default: [],
				type: Array
			}
		}
	}
</script>

<style>
</style>
